<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>欣雨防伪溯源系统</title>
    <meta charset="utf-8">
    <style type="text/css">
        #bt {
            font-size: 28px;
            padding: 2px 16px;
            font-weight: bold;
        }

        #container {
            margin: 0 auto;
            width: 100%;
        }

        #header {
            margin: auto;
            width: 100%;
            height: 150px;
            background-color: #BCA9F5;
            background-image: url(../assets/img/header2.gif);
            background-repeat: no-repeat;
            background-position: center;
            background-size: 100% 150px;
        }

        #nav {
            width: 100%;
            height: 40px;
            color: #ffffff;
            line-height: 40px;
            text-align: center;
            background-color: #BCA9F5;
        }

        ul {
            margin: 0 auto;
            width: 950px;
            text-align: center;
            list-style: none;
        }

        li {
            float: left;
            margin: 0 auto;
            text-align: center;
            font-size: 16px;
            width: 12em;
            padding: 2px 8px;
        }

        li > a:link,
        li > a:visited,
        li > a:active {
            color: #100719;
            text-decoration: none;
        }

        li > a:hover {
            background-color: #ffffff;
            text-align: center;
            display: block;
            color: #100719;
        }

        #mainbody {
            background-color: #FFFFFF;
            padding: 0 auto;
            margin: 0 auto;
            width: 1001px;
        }

        #main {
            width: 60%;
            float: left;
            padding: 0 30px;
            margin: 0 auto;
        }

        #righter {
            width: 30%;
            float: right;
        }

        #footer {
            background-color: #FFFFFF;
            clear: both;
            text-align: center;
            font-size: 16px;
            line-height: 40px;
        }
    </style>
</head>
<body>

<div id="container">
    <div id="header"><a name="#1"></a>
    </div>
    <div id="nav">
        <ul>
            <li>
                <a class="a" href="#1">首&nbsp;&nbsp;&nbsp;&nbsp;页</a>
            </li>
            <li>
                <a class="a" href="#2">系统名称</a>
            </li>
            <li>
                <a class="a" href="#3">系统介绍</a>
            </li>
            <li>
                <a class="a" href="#4">选择模式</a>
            </li>
        </ul>
    </div>
    <div id="mainbody">
        <div id="main">
            <h1 id="bt"><a name="#2"></a>系统名称</h1>
            <h3>欣雨防伪溯源系统</h3>
            <h1 id="bt"><a name="#3"></a>系统介绍</h1>
            <p>&nbsp;&nbsp;&nbsp;&nbsp;商家上传商品图片，根据时间，图片或者其他影响因数，生成唯一的防伪验证二维码。</p>
            <p>&nbsp;&nbsp;&nbsp;&nbsp;为方便用户，用户参与扫描即可查询到对应购买商品的所有信息，包括看到商品的经销商，生产地，查询次数等。</p>
            <p>&nbsp;&nbsp;&nbsp;&nbsp;商家可以看到用户的扫码结果，管理商品图片以及二维码。</p>
        </div>
        <div id="rightbar">
            <h1 id="bt"><a name="#4"></a>选择模式</h1>
            <p>我是上帝（顾客）——><a th:href="@{/commodity/search}" target="_blank">进入</a></p>
            <p>我是老板（商家）——><a th:href="@{/login}" target="_blank">进入</a></p>
            <img th:src="@{/assets/img/huochairen.gif}" width="200px" height="200px">
        </div>
    </div>
    <div id="footer">
        <p>&copy;Copyright 老区四舍416。Designed By He Yujie and Dai Xinrui</p>
    </div>
</div>
</body>
</html>